<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>پەرى رامكىسى مىساللىرى</title>
    <link rel="stylesheet" href="peri.css">
    <style>
        *{
            font-family: 'ukij ekran';
        }
        .container {
            max-width: 800px;
            margin: 30px auto;
            padding: 20px;
            text-align: center;
        }
        .demo-btn {
            display: inline-block;
            margin: 10px;
            padding: 12px 24px;
            background: #1890ff;
            color: #fff;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.3s;
            font-size: 14px;
        }
        .demo-btn:hover {
            background: #40a9ff;
            transform: translateY(-1px);
        }
        .demo-group {
            margin: 20px 0;
            padding: 20px;
            border-radius: 8px;
            background: #f5f5f5;
            text-align: left;
        }
        h3 {
            margin-bottom: 15px;
            color: #333;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="demo-group">
            <h3>1. ئاساسىي ئىشلىتىش</h3>
            <button class="demo-btn" onclick="showBasic()">ئاددىي رامكا</button>
            <button class="demo-btn" onclick="showWithTitle()">ماۋزۇلۇق رامكا</button>
            <button class="demo-btn" onclick="showAutoClose()">ئاپتوماتىك تاقىلىدىغان</button>
        </div>

        <div class="demo-group">
            <h3>2. تېما تەڭشەكلىرى</h3>
            <button class="demo-btn" onclick="showLight()">يورۇق تېما</button>
            <button class="demo-btn" onclick="showDark()">قاراڭغۇ تېما</button>
        </div>

        <div class="demo-group">
            <h3>3. ئانىماتسىيە ئۈنۈملىرى</h3>
            <button class="demo-btn" onclick="showAnimBounce()">سەكرەش</button>
            <button class="demo-btn" onclick="showAnimFade()">سۇسلاش</button>
            <button class="demo-btn" onclick="showAnimSlideTop()">ئۈستىدىن چۈشۈش</button>
            <button class="demo-btn" onclick="showAnimSlideBottom()">ئاستىدىن چىقىش</button>
            <button class="demo-btn" onclick="showAnimFlip()">ئۆرۈلۈش</button>
        </div>

        <div class="demo-group">
            <h3>4. ئالاھىدە ئىقتىدارلار</h3>
            <button class="demo-btn" onclick="showToast()">Toast ئۇچۇرى</button>
            <button class="demo-btn" onclick="showLoading()">يۈكلەش ھالىتى</button>
            <button class="demo-btn" onclick="showConfirm()">جەزملەشتۈرۈش</button>
            <button class="demo-btn" onclick="showSteps()">قەدەملىك كۆرسىتىش</button>
            <button class="demo-btn" onclick="showPhoto()">سۈرەت كۆرسىتىش</button>
        </div>

        <div class="demo-group">
            <h3>5. كۇنۇپكا تەڭشەكلىرى</h3>
            <button class="demo-btn" onclick="showButtonRight()">ماقۇل كۇنۇپكىسى ئوڭدا</button>
            <button class="demo-btn" onclick="showButtonLeft()">ماقۇل كۇنۇپكىسى سولدا</button>
        </div>

        <div class="demo-group">
            <h3>6. باشقا مىساللار</h3>
            <button class="demo-btn" onclick="showLongText()">ئۇزۇن مەزمۇن</button>
        </div>
    </div>

    <script src="peri.js"></script>
    <script>
        // 1. ئاساسىي ئىشلىتىش
        function showBasic() {
            peri.open({
                content: 'ئاددىي ئۇچۇر رامكىسى'
            });
        }

        function showWithTitle() {
            peri.open({
                title: 'ئەسكەرتىش',
                content: 'بۇ ماۋزۇلۇق رامكا'
            });
        }

        function showAutoClose() {
            peri.open({
                content: 'بۇ رامكا 2 سېكۇنتتىن كېيىن تاقىلىدۇ',
                time: 2
            });
        }

        // 3. تېما تەڭشەكلىرى
        function showLight() {
            peri.open({
                theme: 'light',
                title: 'يورۇق تېما',
                content: 'بۇ يورۇق تېمىلىق رامكا مىسالى',
                btn: ['ماقۇل', 'ياق']
            });
        }

        function showDark() {
            peri.open({
                theme: 'dark',
                title: 'قاراڭغۇ تېما',
                content: 'بۇ قاراڭغۇ تېمىلىق رامكا مىسالى',
                btn: ['ماقۇل', 'ياق']
            });
        }

        // 4. ئالاھىدە ئىشلىتىش
        function showConfirm() {
            peri.open({
                title: 'جەزملەشتۈرۈش',
                content: 'بۇ مەزمۇننى راستىنلا ئۆچۈرەمسىز؟',
                btn: ['ھەئە', 'ياق'],
                yes: function(index) {
                    peri.open({
                        content: 'مۇۋەپپەقىيەتلىك ئۆچۈرۈلدى',
                        time: 2
                    });
                    peri.close(index);
                }
            });
        }

        function showLongText() {
            peri.open({
                title: 'ئۇزۇن مەزمۇن',
                content: 'بۇ بىر ئۇزۇن مەزمۇنلۇق مىسال. سىز بۇ يەرگە خالىغان ئۇزۇنلۇقتىكى تېكىستنى يازالايسىز. رامكا مەزمۇننىڭ ئۇزۇنلۇقىغا قاراپ ماسلىشىدۇ. بۇ پەقەت بىر سىناق مەزمۇنى. سىز بۇنى ئۆزىڭىزنىڭ ئېھتىياجىغا قاراپ ئۆزگەرتسىڭىز بولىدۇ.',
                btn: ['تامام']
            });
        }

        // ئانىماتسىيە مىساللىرى
        function showAnimBounce() {
            peri.open({
                title: 'سەكرەش ئۈنۈمى',
                content: 'بۇ سەكرەش ئانىماتسىيەسى',
                anim: 'bounce',
                btn: ['تامام']
            });
        }

        function showAnimFade() {
            peri.open({
                title: 'سۇسلاش ئۈنۈمى',
                content: 'بۇ سۇسلاش ئانىماتسىيەسى',
                anim: 'fade',
                btn: ['تامام']
            });
        }

        function showAnimSlideTop() {
            peri.open({
                title: 'ئۈستىدىن چۈشۈش',
                content: 'بۇ ئۈستىدىن چۈشۈش ئانىماتسىيەسى',
                anim: 'slide-top',
                btn: ['تامام']
            });
        }

        function showAnimSlideBottom() {
            peri.open({
                title: 'ئاستىدىن چىقىش',
                content: 'بۇ ئاستىدىن چىقىش ئانىماتسىيەسى',
                anim: 'slide-bottom',
                btn: ['تامام']
            });
        }

        function showAnimFlip() {
            peri.open({
                title: 'ئۆرۈلۈش ئۈنۈمى',
                content: 'بۇ ئۆرۈلۈش ئانىماتسىيەسى',
                anim: 'flip',
                btn: ['تامام']
            });
        }

        // يېڭى ئىقتىدارلارنىڭ مىساللىرى
        function showToast() {
            peri.toast({
                content: 'مۇۋەپپەقىيەتلىك ساقلاندى!',
                dir: 'rtl'  // RTL يۆنىلىشى
            });
        }

        function showLoading() {
            var loadingIndex = peri.loading({
                content: 'يۈكلەۋاتىدۇ...',
                dir: 'rtl'  // RTL يۆنىلىشى
            });
            setTimeout(function() {
                peri.close(loadingIndex);
                peri.toast({
                    content: 'يۈكلەش تاماملاندى',
                    dir: 'rtl'  // RTL يۆنىلىشى
                });
            }, 2000);
        }

        function showPhoto() {
            peri.photo('https://foruda.gitee.com/images/1729736641247389155/d1d26d21_1850385.png', {
                title: 'سۈرەت ماۋزۇسى'
            });
        }

        // قەدەملىك كۆرسىتىش
        function showSteps() {
            peri.steps({
                steps: [
                    {title: '1-قەدەم', content: 'بىرىنچى قەدەم مەزمۇنى'},
                    {title: '2-قەدەم', content: 'ئىككىنچى قەدەم مەزمۇنى'},
                    {title: '3-قەدەم', content: 'ئۈچىنچى قەدەم مەزمۇنى'}
                ],
                btnText: {
                    next: 'كېيىنكى',
                    prev: 'ئالدىنقى'
                },
                dir: 'rtl',
                finish: function() {
                    peri.toast({
                        content: 'تاماملاندى!',
                        dir: 'rtl'
                    });
                }
            });
        }

        // كۇنۇپكا ئورنى مىساللىرى
        function showButtonRight() {
            peri.open({
                title: 'كۇنۇپكا ئورنى',
                content: 'ماقۇل كۇنۇپكىسى ئوڭ تەرەپتە',
                btn: ['ماقۇل', 'ياق'],
                btnAlign: 'right',
                dir: 'rtl'
            });
        }

        function showButtonLeft() {
            peri.open({
                title: 'كۇنۇپكا ئورنى',
                content: 'ماقۇل كۇنۇپكىسى سول تەرەپتە',
                btn: ['ماقۇل', 'ياق'],
                btnAlign: 'left',
                dir: 'rtl'
            });
        }
    </script>
</body>
</html>
